<template>
	<view class="user-page">
								<!-- 头像和名称 -->
								<view class="head">
											<view class="head-box " >
															<image :src="user.avatarUrl" mode=""></image>
															<view class="username">
																			{{user.nickName}}
															</view>
											</view>
								</view>
								<view class="" style="background-color: pink;width: 100%;height: 740rpx;background-color: #f7f8f6;">
									
								</view>
											
								<view class="body">
												<!-- 导航栏 -->
												<view class="nav-box container1">
															<view class="shop nav">
																		<view class="">
																					8
																		</view>
																		<view class="">
																					收藏的店铺
																		</view>
															</view>
															<view class="sc-goods nav">
																		<view class="">
																					14
																		</view>
																		<view class="">
																					收藏的商品
																		</view>
															</view>
															<view class="gz-goods nav">
																		<view class="">
																					18
																		</view>
																		<view class="">
																					关注的商品
																		</view>
															</view>
															<view class="foot nav">
																		<view class="">
																					84
																		</view>
																		<view class="">
																					足迹
																		</view>
															</view>
												</view>
												<!-- 我的订单 -->
												<view class="my-order container1">
															<view class="title">
																		我的订单
															</view>
															<view class="order-box">
																			<view class="order">
																						<image src="../../static/my-icons/icon1.png" mode=""></image>
																						<view class="">
																									待付款
																						</view>
																			</view>
																			<view class="order">
																						<image src="../../static/my-icons/icon2.png" mode=""></image>
																						<view class="">
																									待收货
																						</view>
																			</view>
																			<view class="order">
																						<image src="../../static/my-icons/icon3.png" mode=""></image>
																						<view class="">
																									退款/退货
																						</view>
																			</view>
																			<view class="order" style="text-align: center;">
																						<image src="../../static/my-icons/icon4.png" mode=""></image>
																						<view class="">
																									全部订单
																						</view>
																			</view>
															</view>

												</view>
												<!-- 功能列表 -->
												<view class="bottom container1">
															<view class="check">
																		收货地址<uni-icons type="right"></uni-icons>
															</view>
															<view class="check">
																		联系客服<uni-icons type="right"></uni-icons>
															</view>
															<view class="check" @click="isLogout">
																		退出登录<uni-icons type="right"></uni-icons>
															</view>
												</view>
								</view>
								<view>
											<!-- 提示窗示例 -->
											<uni-popup ref="alertDialog" type="dialog">
												<uni-popup-dialog type="info" cancelText="取消" confirmText="退出" title="温馨提示" content="确认退出吗？" @confirm="loginOutHandler"
													></uni-popup-dialog>
											</uni-popup>
								</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	
	export default {
		name:'userinfo',
		data() {
			return {}
		},
		computed:{ ...mapState('user',['user']) },
		methods:{
			...mapMutations('user',['loginOut']),
			/**
			 * 确认退出
			 */
					isLogout(){
								this.$refs.alertDialog.open()
					},
					/**
					 * 退出登录
					 */
					async loginOutHandler(){
						this.loginOut()
					},
		}
	}
</script>

<style lang="scss" scoped>
			page{
						background-color: #f7f8f6;
			}
			.head{
						width: 100%;
						height: 400rpx;
						background-color: #C00000;
						position: relative;
						margin-bottom: -30rpx;
						.head-box{
										position: absolute;
										top: 50%;
										left: 50%;
										transform: translateX(-50%) translateY(-50%);
										image{
													margin-bottom: 30rpx;
													width: 180rpx;
													height: 180rpx;
													border-radius: 50%;
													border: 5rpx solid white;
													box-shadow: 0px 0px 10px 0px black
										}
										.username{
													text-align: center;
													color: white;
													font-size: 34rpx;
										}
						}

			}
			
						.user-page{
									position: relative;
									height: 100vh;
						}
						.body{
									top: 50%;
									left: 50%;
									position: absolute;
									transform: translate(-50%,-26%);
									.nav-box{
												width: 640rpx;
												display: flex;
												justify-content: space-between;
												padding: 20rpx 30rpx;
												font-size: 28rpx;
												.nav{
															text-align: center;
												}
									}
									.my-order{
												background-color: white;
												padding:20rpx ;
												.title{
															font-size: 32rpx;
												}
												.order-box{
															display: flex;
															justify-content: space-between;
															padding-top: 30rpx;
															.order{
																		width: 140rpx;
																		text-align: center;
																		font-size: 28rpx;
																		image{
																				margin: 0 auto;
																				width: 80rpx;
																				height: 80rpx;
																		}
															}	
												}		
									}
						}
						.bottom{
									.check{
												display: flex;
												justify-content: space-between;
												height: 100rpx;
												line-height: 100rpx;
												padding: 0 20rpx;
									}
						}

.container1{
			background-color: white;
			border-radius: 10rpx;
			margin-bottom: 15rpx;
}
</style>